<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>小米商品卡片</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }



        body{
background-color: #333;
            font:13px/1.5 Helvetica Neue,Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif
        }

        a{
            text-decoration: none;
        }

    /*    设置外层容器*/
        .card{
            box-sizing: border-box;
            width: 234px;
            height: 300px;
            padding: 20px 0;
            background-color: #fff;
            text-align: center;
margin: 100px auto;
        }

        /*设置图片的容器*/
        .img-wrapper{
            width: 160px;
            height: 160px;
            margin: 0 auto;
        }

        .img-wrapper img{
            vertical-align: top;
            width: 100%;
        }

    /*    设置标题*/
        .card h3{
            margin-top: 18px;
            font-size: 14px;
            color: #333;
            font-weight: normal;
        }
        /*设置描述文字*/
        .card .desc{
            margin: 2px 0 10px;
            color: #b0b0b0;
            font-size: 12px;
        }

    /*    设置价格*/
        .price span{
            color: #ff6700;
            font-size: 14px;
        }

        .price del{
            color: #b0b0b0;
            font-size: 14px;
        }

    </style>
</head>
<body>
<a href="#">
    <div class="card">
        <div class="img-wrapper">
            <img src="./imgs/63532c3fce30e7beb763d804d6a40f75.webp" alt="小米笔记本">
        </div>
        <h3>小米笔记本Pro X 14</h3>
        <p class="desc">高能旗舰 轻薄力作</p>
        <div class="price">
            <span>6999元</span>
            <del>7999元</del>
        </div>
    </div>
</a>

</body>
</html>